<template>
	<view>
		<Header height="222rpx" title="签到记录" :paddingTop="navHeight"></Header>
		<view class="w345 mauto mt-216">
			<view class="disflex  " style="justify-content: center;">
				<view class="">
					<view class="fs14 cfff textc mb10">连续签到（天）</view>
					<view class="fs30 cfff textc mb10">{{signInRecordList.continuousDays}}</view>
				</view>
				<view class="" style="margin-left: 80rpx;">
					<view class="fs14 cfff textc mb10">累计签到（天）</view>
					<view class="fs30 cfff textc mb10">{{signInRecordList.totalDays}}</view>
				</view>
			</view>
			<view class="bradius10 bgfff shadow pl20 pr20 minh80vh posre zindex9" style="padding-top: 20rpx;">
				<view class="disflex align-cen jsbet bb mt5" v-if="isActive === 0 && list.length" v-for="(v,i) in list"
					:key="i">
					<view>
						<view class="fs16 fb500 mb5">{{v.signDate}}签到</view>
						<view class="fs12 c999 mb5">{{v.signTime}}</view>
					</view>
					<view class="fs16 cFE8F32 fb500">+1</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import Header from "@/components/header/header.vue";
	import navbar from "@/components/navbar/navbar.vue";
	import {
		getSigninRecordApi
	} from '@/api/index.js';
	export default {
		components: {
			Header,
			navbar
		},
		data() {
			return {
				isLoading: true,
				point: 0,
				isActive: 0,
				list: [{
					description: '2025年8月6日签到',
					create_time: '2025-06-24',
					point: 20
				}, {
					description: '2025年8月7日签到',
					create_time: '2025-06-24',
					point: 10
				}],
				page: 1,
				pageSize: 20,
				last_page: 1,
				navHeight: '0px',
				signInRecordList: []
			}
		},
		onLoad() {
			// this.$http.getUcenter().then(res => {
			// 	if (res.status) {
			// 		this.point = res.data.point
			// 	} else {
			// 		this.$utils.msg(res.info);
			// 	}
			// });
			this.getSigninRecord()
		},
		onReachBottom() {
			if (this.page == this.last_page) {
				this.$utils.msg('已经到底啦');
				return
			}
			this.page++
			this.getList()
		},
		methods: {
			// 获取签到记录
			async getSigninRecord() {
				const res = await getSigninRecordApi(uni.getStorageSync('UserInfo').userId);
				console.log(res, 'res-签到记录');
				if (res && res.code === 200) {
					this.list = res.signInRecordList.signInRecordList;
					this.signInRecordList = res.signInRecordList;
				}
			},
			inputHeight(data, navHeight) {
				this.navHeight = navHeight + 'px'
			},
			back() {
				uni.navigateBack()
			},
			switchTab(value) {
				console.log(value)
				this.isActive = value
			},
			getList() {
				this.$http.getSignPointList({
					'page': this.page,
					'pageSize': this.pageSize
				}).then(res => {
					this.isLoading = false
					this.last_page = res.data.last_page
					this.list = this.page == 1 ? res.data.data : [...this.list, ...res.data.data]
				})
			}
		}
	}
</script>

<style>
	.mt-216 {
		margin-top: -216rpx !important;
	}

	.active {
		font-size: 30rpx;
		font-weight: 600;
		color: #333;
	}

	.active_line {
		margin: 0 auto;
		margin-top: 5rpx;
		background: #0D8FFF;
		width: 40rpx;
		height: 6rpx;
		margin-left: 45rpx;
		transition: transform 0.3s ease;
		/* 添加过渡效果 */
	}

	.translatedX {
		transform: translateX(150rpx);
	}

	.bb {
		border-bottom: 2rpx solid #F5F5F5;
	}

	.cFE8F32 {
		color: #FE8F32;
	}

	.w345 {
		width: 700rpx;
	}

	.mauto {
		margin: auto
	}

	.fs14 {
		font-size: 28rpx;
	}

	.cfff {
		color: #fff
	}

	.textc {
		text-align: center
	}

	.mb10 {
		margin-bottom: 10rpx;
	}

	.fs30 {
		font-size: 60rpx;
	}

	.bradius10 {
		border-radius: 20rpx;
	}

	.bgfff {
		background: #fff
	}

	.disflex {
		display: flex
	}

	.pl20 {
		padding-left: 40rpx;
	}

	.pt10 {
		padding-top: 20rpx;
	}

	.fs12 {
		font-size: 24rpx
	}

	.align-cen {
		align-items: center
	}

	.jsbet {
		justify-content: space-between
	}

	.pr20 {
		padding-right: 40rpx;
	}

	.minh80vh {
		height: calc(100vh - 120px);
	}

	.posre {
		position: relative;
		overflow-y: auto;
	}

	.zindex9 {
		z-index: 9
	}

	.fs16 {
		font-size: 30rpx;
	}

	.fb500 {
		font-weight: 500
	}

	.c999 {
		color: #999
	}


	.mb5 {
		margin-bottom: 10rpx;
	}
</style>